<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <h2>Local tapars</h2>
        <p></p>
        <ul class="plates">
            <li>Loading tapes.....</li>
        </ul>
        <form action="" class="add-items" name="plate-form" method="POST" action="/login">
            <input type="text" name="item" placeholder="Item Name" required>
            <input type="submit" value="+ Add Item">
        </form>
    </div>
    <script>
        let plates =[];
        const oForm = document.forms["plate-form"];
        console.log(oForm);
        oForm.addEventListener('submit',function(event){
            //form 用来收集用户信息的
            event.preventDefault();
            let text = (this.querySelector('[name=item]')).value;
            // console.log(text);
            //如何设计 存到storage
            if(!text.trim()){
                alert('请输入内容');
                return ;
            
            }
            let plate ={
                text,
                done:false
            }
            plates.push(plate);
            localStorage.setItem('item',JSON.stringify(plates));
            this.reset();
            loadData();
        })
        function loadData(){
            let items = localStorage.getItem('items');
            if(!items) return ;
            // plates = JSON.parse(items);
            // if(!plates.length) return;
            plates = JSON.parse(localStorage.getItem('item'));
            console.log(typeof plates);
            document.querySelector('.plates').innerHTML=plates.map((plate,index) =>`
             <li>
                <input type="checkbox" id="items${index}" ${plate.done?'checked':''} data-index="${index}">
                <label for="item${index}">${plate.text}<label>
            </li>
            `).join('')

        }
        function toggleDone(e){
            // console.log(e);
            if(e.target =='li' || e.target =='label') return ;
            const el = e.target;
            const index = el.dataset.index;
            console.log(index);
            plates[index].done = !plates[index].done
            localStorage.setItem('items',JSON.stringify(plates))
        }
        window.onload = function(){
            loadData();
            // 外层ul  父元素 点子元素 ，父元素也会执行 事件冒泡
            const itemsList = document.querySelector('.plates');
            itemsList.addEventListener('click',toggleDone)
        }
    </script>  
</body>
</html>